<div class="datetime-container" *ngIf="layoutMode === 'standard'" [ngClass]="dateTimeOptions.cssClass">
    <div class="small-panel" (click)="showMainPanel()">
        <i nz-icon type="clock-circle" theme="outline" class="clock-icon"></i>
        <!-- <span *ngIf="dateTimeOptions.key !== 'clear_time' && dateTimeOptions.key !== 'custom'">{{dateTimeOptionsMap[dateTimeOptions.key]}}</span> -->
        <span class="display-custom-time" *ngIf="dateTimeOptions.key !== 'clear_time' && !dateTimeOptions.lineBreak">
            {{startDate | datetime}}
            <br>~{{endDate | datetime}}</span>
        <span class="display-custom-time" *ngIf="dateTimeOptions.key !== 'clear_time' && dateTimeOptions.lineBreak">
            {{startDate | datetime}}~{{endDate | datetime}}
        </span>
    </div>
    <div class="main-panel" *ngIf="mainPanelIsShow">
        <div class="main-panel-header">
            <span>按时间筛选</span>
            <i nz-icon type="close" theme="outline" (click)="hideMainPanel()" class="close-icon"></i>
        </div>
        <div class="main-panel-body">
            <div class="option-describe">
                <div>{{dateTimeOptionsMap[dateTimeOptions.key]}}</div>
                <div>{{startDate | datetime}}~{{endDate | datetime}}</div>
            </div>
            <nz-radio-group [(ngModel)]="dateTimeOptions.key" [nzButtonStyle]="'solid'" class="datetime-options"
                            (ngModelChange)="initOptions($event)">
                <div class="datetime-options-line">
                    <div *ngFor="let mode of quickModeOptions"><label nz-radio-button
                                                                      nzValue="{{mode}}">{{dateTimeOptionsMap[mode]}}</label>
                    </div>
                    <div><label nz-radio-button nzValue="custom" (click)="showCustomPanel()">自定义</label></div>
                    <div><label nz-radio-button nzValue="clear_time" *ngIf="clearTimeMode">清除设置</label></div>
                </div>
            </nz-radio-group>
        </div>
        <div *ngIf="customPanelIsShow" class="custom-panel">
            <div class="custom-panel-body">
                <div class="date">
                    <span>开始: </span>
                    <nz-date-picker
                        [nzAllowClear]=false
                        [nzDisabledDate]="disabledStartDate"
                        nzShowTime
                        nzFormat="yyyy-MM-dd HH:mm:ss"
                        [(ngModel)]="customStartDate"
                        nzPlaceHolder="开始时间"
                        (ngModelChange)="onStartChange($event)"
                        [nzClassName]="isop-datetime-picker">
                    </nz-date-picker>
                </div>
                <div class="date">
                    <span>结束: </span>
                    <nz-date-picker
                        [nzAllowClear]=false
                        [nzDisabledDate]="disabledEndDate"
                        nzShowTime
                        nzFormat="yyyy-MM-dd HH:mm:ss"
                        [(ngModel)]="customEndDate"
                        nzPlaceHolder="结束时间"
                        (ngModelChange)="onEndChange($event)"
                        [nzClassName]="isop-datetime-picker">
                    </nz-date-picker>
                </div>
            </div>
            <div class="custom-panel-footer">
                <!-- <button nz-button nzType="default" (click)="resetCustom()">{{'reset' | translate}}</button> -->
                                <button nz-button nzType="default" (click)="resetCustom()">重置</button>

                <button nz-button nzType="primary" (click)="customConfirm('hide')">应用</button>
            </div>
        </div>
    </div>
</div>

<div *ngIf="layoutMode === 'vertical'" class="vertical-mode">
    <ul>
        <li *ngFor="let mode of quickModeOptions" [ngClass]="{'active': dateTimeOptions.key === mode}"
            (click)="changeMode(mode)">最近{{dateTimeOptionsMap[mode]}}</li>
    </ul>
    <nz-range-picker [(ngModel)]="dateRange" nzShowTime (nzOnOk)="timeSubmit()"></nz-range-picker>
</div>
